<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/base.css" rel="stylesheet" />
		<link href="css/animation.css" rel="stylesheet" />
		<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script src="js/animation.js" type="text/javascript"></script>
		<script>
			function page1_clear() {
				$("#a").css("opacity", 0);
				$("#a").attr("class", "");
				$("#b").hide();
				$("#").attr("class", "");
				$("#").css("opacity", 0);
				$("#c").attr("class", "");
			}

			function page2_clear() {
				var pageimg = ".page02 img";
				$(pageimg).hide();
				$(pageimg).attr("class", "");
			}

			function page3_clear() {
				var pageimg = ".page03 img";
				$(pageimg).hide();
				$(pageimg).attr("class", "");
			}
			function page4_clear(){
				var pageimg = ".page04 img";
	              $(pageimg).hide();
	              $(pageimg).attr("class", "");
			}
			var current = 0;
			var last = 5;
			$(function() {
				next();
				$("#l").bind("click", function() {
					prev();
				});
				$("#r").bind("click", function() {
					next();
				});
				$("#submit").bind("click", function() {
					$("#l").hide();
					$("#r").hide();
					$(".page07").show();
				});
				$(".close").bind("click",function(){
					$(".page05").hide();
				});
			});

			function next() {
				var index = current + 1;
				if (index == last) {
					$("#r").hide();
				}
				if (index == 1) {
					$("#l").hide();
				} else {
					$("#l").show();
				}
				current = index;
				go(current - 1);
			}

			function prev() {
				var index = current - 1;
				if (index == 1) {
					$("#l").hide();
				}
				if (index < last) {
					$("#r").show();
				}
				current = index;
				go(index + 1);
			}

			function go(old) {
				var fn = window["page" + current + "_start"];
				$(".page05").hide();
				if (current == 1) {
					$(".page0" + current).show();
					fn();
				} else if (current == 5) {
					$(".page0" + current).show();
					fn();
				} else {
					$(".page0" + old).fadeOut(function() { //转场
						var _fn=window["page" + old + "_clear"];
						if(_fn) fn();
						$(".page0" + current).fadeIn(
							function() {
								fn();
							}
						);
					});
				}
			}
		</script>
		<title>
		</title>

		<body>

			<div class="page page04 containbg">
				<img src="img/5-2.png" style="width:70%; top:4%; right:15%; display:none;" />
				<img src="img/5-3.png" style="height:44%; left:28%; top:30%; display:none;" />
				<img src="img/5-4.jpg" style="height:34%; left:35%; top:30%; display:none;" />
				<img src="img/5-5.png" style="height:47%; left:35%; top:30%; display:none;" />
				<img src="img/5-6.png" style="width:74%; left:13%; bottom:4%; display:none;" />
			</div>
			<div class="page page05">

				<div class="page05_form">
					<a href="#" class="close">×</a>
					<img src="img/6-2.png" style="width:50%; top:10%; right:20%;" />
					<img src="img/6-3.png" style="width:76%; left:18%; top:14%;" />
					<a href="javascript:void(0);" id="submit" style="width:40%; position: absolute; display: inline-block; left:28%; top:50%;"><img style="width:100%;" src="img/6-1.png" /></a>
					<div class="form_content">
						<ul>
							<li>
								<label>姓名:</label>
								<span><input type="text" placeholder="必填" class="short" /></span>
							</li>
							<li>
								<label>电话:</label>
								<span><input type="text" placeholder="必填"  class="short" /></span>
							</li>
							<li>
								<label class="lbl_ask">最想问CEO的问题：</label>
							</li>
							<li>
								<span><input type="text" placeholder="可选填"  class="long" /></span>
							</li>
							<li>
								<label>公司:</label>
								<span><input type="text" placeholder="必填"  class="short" /></span>
							</li>
							<li>
								<label>职务:</label>
								<span><input type="text" placeholder="必填"  class="short" /></span>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<div class="page containbg page03">
				<img src="img/3-2.png" style="height:18%; top:8%; right:2%; display:none;" />
				<img src="img/3-3.png" style="height:30%; right:2%; top:24%; display:none;" />
				<img src="img/3-4.png" style="width:80%; left:10%; bottom:6%; display:none;" />
			</div>
			<div class="page page02 containbg">
				<img src="img/2-2.png" style="width:30%; top:8%; right:40%; display:none;" />
				<img src="img/2-3.png" style="width:80%; right:12%; top:16%; display:none;" />
				<img src="img/2-4.png" style="width:40%; left:30%; bottom:6%; display:none;" />
			</div>
			<div class="page page01 containbg">
				<img id="a" src="img/1-2.png" style="height:36%; top:10%; right:20%; opacity: 0;" />
				<img id="b" src="img/1-3.png" style="width:7%; right:12%; top:44%; display:none;" />
				<img id="c" src="img/1-4.png" style="height:80%; left:4%; top:6%; opacity: 0;" />
			</div>
			<div class="page page07"></div>
			<img id="l" class="move" src="img/l.png" style="position:absolute; left:0; height:3rem; top:50%;" />
			<img id="r" class="move" src="img/r.png" style="position:absolute; right:0; height:3rem; top:50%;" />
		</body>

</html>